<template> 
    <div class="wrapper" ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>



<script>
    import BScroll from "better-scroll"

    export default {
    name: 'scroll',
    props:{
      probeType : {
        type : Number,
        default : 1
      },
      pullUpLoad : {
        type : Boolean,
        default : false
      }
    },
    data( ){
        return {
            scroll:Object
        }
    },
    created(){},
    mounted(){

      this.scroll = new BScroll( this.$refs.wrapper , {
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad ,
        click : true,
        observeDOM: true
      })

      if(this.probeType > 2)
        this.scroll.on("scroll" ,(position) => {
          this.$emit("scroll",position)
        })

      if(this.pullUpLoad)
        this.scroll.on("pullingUp" , () => {
          this.$emit("pullingUp")
          this.scroll.finishPullUp()
        })

    } ,
    computed:{
      getrefresh(){
        return this.scroll.refresh()
      }
    }
    // updated () {
    //   console.log(1);
    //   //解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
    //   //原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
    //   //利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。
    //   let img = document.getElementsByClassName('content')[0].getElementsByTagName('img')
    //   let count = 0
    //   let length = img.length
    //   if (length) {
    //     let timer = setInterval(() => {
    //       if (count == length) {
    //         // console.log('refresh')
    //         this.scroll.refresh()
    //         clearInterval(timer)
    //       } else if (img[count].complete) {
    //         count++
    //       }
    //     }, 100)
    //   }
    // }
  }
</script>

<style>
</style>